/*
 * @Date: 2022-01-11 18:15:21
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-11 20:28:45
 * @FilePath: \todo-app\src\components\TodoHeader.js
 */
import React, { Component } from 'react'

export default class TodoHeader extends Component {
  state = {
    content: ''
  }
  // ~输入框发生变化
  changeContent = e => {
    const { value } = e.target
    this.setState({
      content: value.trim()
    })
  }
  addContent = e => {
    const { setList } = this.props
    const { content } = this.state
    if (e.keyCode === 13) {
      setList(content)
      this.setState({
        content: ''
      })
    }
  }
  render() {
    const { content } = this.state
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
          value={content}
          onChange={this.changeContent}
          onKeyUp={this.addContent}
        />
      </header>
    )
  }
}
